<template>
  <div>
    <div class="liquidity">
      <Liquidity v-if="liquidityPage === 'home'" @change="change" />
      <AddLiquidity v-if="liquidityPage === 'add'" @change="change" />
      <RemoveLiquidity v-if="liquidityPage === 'remove'" @change="change" />
      <ImportPool v-if="liquidityPage === 'import'" @change="change" />
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import showLoading from "@/components/loading";
import Liquidity from "./components/Liquidity";
import AddLiquidity from "./components/AddLiquidity";
import RemoveLiquidity from "./components/RemoveLiquidity";
import ImportPool from "./components/ImportPool";

import { getTokenBySymbol } from "@/utils/token";
import { swap, addLiquidity, removeLiquidity } from "@/init";

import store from "@/store";
import { mapState } from "vuex";

export default {
  components: {
    Header,
    Liquidity,
    AddLiquidity,
    RemoveLiquidity,
    ImportPool,
  },
  data() {
    return {
      page: "home",
    };
  },
  computed: {
    ...mapState({
      liquidityPage: (state) => state.liquidityPage,
    }),
  },
  methods: {
    async change(page) {
      // await swap({
      //   tokenIn: getTokenBySymbol("BUSD"),
      //   tokenOut: getTokenBySymbol("CAKE"),
      //   amount: 1,
      //   slippage: 5,
      // });
      // await addLiquidity({
      //   tokenA: getTokenBySymbol("TSE"),
      //   tokenB: getTokenBySymbol("BUSD"),
      //   amount: 1,
      //   slippage: 5,
      // });
      // await removeLiquidity({
      //   tokenA: getTokenBySymbol("TSE"),
      //   tokenB: getTokenBySymbol("BUSD"),
      //   remove: 5,
      //   slippage: 5,
      // });
      store.commit('SET_LIQUIDITYPAGE', page);
    },
  },
};
</script>

